<template>
  <el-table :data="get_roleList" border style="width: 100%">
    <el-table-column prop="id" label="角色编号" width="180"> </el-table-column>
    <el-table-column prop="rolename" label="角色名称" width="180"> </el-table-column>
    <el-table-column prop="status" label="状态">
      <template v-slot='item'>
        <el-button type="primary" size='small' plain v-if="item.row.status == 1">启用</el-button>  
        <el-button type="danger" size='small' plain v-else>禁用</el-button>  
      </template>
    </el-table-column>
    <el-table-column prop="address" label="操作"> 
        <template v-slot='item'>
          <el-button type="primary" size='small' @click="editItem(item.row.id)">编辑</el-button>
          <el-button type="danger" size='small' >删除</el-button>
        </template>
    </el-table-column>
  </el-table>
</template>
  
  <script>
  import {mapGetters,mapActions} from "vuex"
export default {
  data() {
    return {
      
    }
  },
  computed:{
      ...mapGetters({
        get_roleList:"role/get_roleList"
      })
    },
  methods:{
    ...mapActions({
      action_roleList:"role/action_roleList"
    }),
    //1.点击编辑按钮，显示编辑弹框
    editItem(id){
        //通知父组件，显示弹框
        this.$emit("edit",id)
    }
  },

  //页面挂载完成
  mounted(){
    this.action_roleList();
  }
};
</script>